<template>
	<div class="video-container">
		<mTikTok ref="mTikTokRef" :swiperList="swiperList" @loadMore="loadMore" @change="change">
			<!-- 此处为用户完全自定义 data 中的数据为当前渲染的数据 -->
			<template v-slot="data">
				<!-- active修复视频悬浮层消失和点击的问题 -->
				<view class="video-side-right active">
					<view class="action-item action-item-user" @click="handClickUser(data.item)">
						<image class="shop-logo"
							src="https://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/crop/180x180/gravity/center" />
						<text class="action-item-text"></text>
					</view>
					<view class="action-item" @click="handClickheart(data.item)">
						<text class="marry woshou "
							:class="isAcive?'marry-tubiaozhizuomoban':'marry-tubiaozhizuomoban2'"></text>
						<text class="action-item-text">{{ data.item.id }}</text>
					</view>
					<view class="action-item">
						<text class="iconfont icon-share">☝</text>
						<text class="action-item-text">握手</text>
					</view>
				</view>
				<!-- active修复视频悬浮层消失和点击的问题 -->
				<view class="video-bottom-area active">
					<view class="shop-name"> @{{ data.item.num }}
						<!-- <text>{{dealIp(data.item.clientIP)}}</text> -->
					</view>
					<view class="shop-card">

						<text class="shop-card-item age"> {{getAge(data.item.baseInfo.age)}}</text>
						<text class="shop-card-item"> {{ getZodiac(data.item.baseInfo.age) }}</text>
						<text class="shop-card-item">
							{{ data.item.baseInfo.height ?data.item.baseInfo.height+'cm':'' }}</text>
						<text class="shop-card-item"> {{ keyValue('shcoolList',data.item.baseInfo.education) }}</text>
						<text class="shop-card-item"> {{ dealIncomon(data.item.baseInfo.incoom) }}万</text>
						<text class="shop-card-item"> {{ keyValue('jobList',data.item.baseInfo.staff) }}</text>
						<text class="shop-card-item"> {{ keyValue('houseList',data.item.baseInfo.havehouse) }}</text>
						<text class="shop-card-item"> {{ keyValue('noHave',data.item.baseInfo.haveCar) }}</text>
						<text class="shop-card-item shop-card-itemlast">
							{{ keyValue('marryHistryItem',data.item.baseInfo.currnetMarryHistry) }}</text>

					</view>
				</view>
			</template>
		</mTikTok>
	</div>
</template>
<script lang="ts" setup>
	import { onReady } from '@dcloudio/uni-app'
	import { onMounted, reactive, ref, computed, watch } from "vue";
	import { keyValue, getZodiac, getAge } from "../../utils/common.js"
	import { useUserStore } from '../../stores/user.js';
	const userStore = useUserStore();
	// 导入组件
	import mTikTok from "@/components/mTikTok.vue";

	const mTikTokRef = ref<InstanceType<typeof mTikTok>>();
	const userObj = uniCloud.importObject("userObj")
	const page = ref({
		pageIndex: 1,
		pageSize: 10
	})
	const swiperList = ref([])
	const currnetData = ref({})
	const isAcive = ref(false)

	onReady(() => {
		getUserInfo()
	})
	// watch接收两个参数（数据源，回调函数）
	watch(currnetData, (newVal, oldVal) => {
		console.log(newVal, oldVal)
		dealcss()
	})
	watch(userStore, (newVal, oldVal) => {
		console.log(newVal, oldVal)
		dealcss()
	})
	const dealIp = async (ip) => {
		// if (ip) {
		// 	uni.request({
		// 		url: "/h5api/ipJson.jsp?json=true&ip=" + ip,
		// 		method: "GET",
		// 		success: res => {
		// 			console.log(res);
		// 		}
		// 	})
		// }

	}
	const dealcss = () => {
		let data = currnetData._value
		console.log(userStore.userData.userInfo?.likObj?.selfCollage,
			data._id)

		if (userStore?.userData?.userInfo?.likObj && userStore?.userData?.userInfo?.likObj?.selfCollage?.includes(data._id)) {
			isAcive.value = true
		} else {
			isAcive.value = false
		}
	};
	const getUserInfo = async () => {
		if (userStore?.userData?.userInfo?.userId) {
			return
		}
		const user = await userObj.getUserInfo(uniCloud.getCurrentUserInfo().uid)
		userStore.updateUserData(user)
	}


	const dealIncomon = (val) => {
		return val.replace(/万/g, '');
	}
	const handClickheart = (item) => {
		let user = userStore.userData
		let data = user.userInfo
		// 有值 没有收藏过
		if (data?.likObj && data?.likObj?.selfCollage && !data?.likObj?.selfCollage?.includes(item._id) || data?.likObj?.selfCollage?.length == 0) {
			data?.likObj?.selfCollage?.push(item._id)
			user.userInfo = data
			userStore.updateUserData(user)
			dealClickHeart('add', item._id)
			return
		} else if (data.likObj && data.likObj.selfCollage && data.likObj.selfCollage.length > 0 && data.likObj.selfCollage.includes(item._id)) {
			// 有值 收藏过
			data.likObj.selfCollage = data.likObj.selfCollage.filter(it => it !== item._id);
			dealClickHeart('remove', item._id)
			user.userInfo = data
			userStore.updateUserData(user)
			return
		} else {
			data.likObj = {
				selfCollage: [item._id]
			}
			user.userInfo = data
			userStore.updateUserData(user)
			dealClickHeart('add', item._id)
			return
		}
	}
	const updateStore = (id) => {
		let user = userStore.userData
		let data = user.userInfo
		if (data.likObj && data.likObj.selfCollage && data.likObj.selfCollage.length > 0 && data.likObj.selfCollage.includes(data._id)) {
			data.likObj.selfCollage = data.likObj.selfCollage.filter(item => item !== data._id);
		} else {
			if (data?.likObj && data?.likObj?.selfCollage && !data?.likObj?.selfCollage?.includes(data._id)) {
				data?.likObj?.selfCollage?.push(data._id)
			} else {
				data.likObj = {
					selfCollage: [data._id]
				}
			}
		}
		user.userInfo = data
		userStore.updateUserData(user)
	}
	const dealHeartCss = (data) => {
		if (!data.likObj) {
			return false
		}
		console.log(userStore.userData.userInfo?.likObj?.selfCollage,
			currnet_id._value)
		if (userStore?.userData?.userInfo?.likObj && userStore?.userData?.userInfo?.likObj?.selfCollage?.includes(currnet_id._value)) {
			return true
		}
		// 有值 没有收藏过
		if (data?.likObj && data?.likObj?.selfCollage && !data?.likObj?.selfCollage?.includes(data._id)
		) {
			return false
		}
		// 有值 收藏过
		if (data?.likObj && data?.likObj?.selfCollage && data?.likObj?.selfCollage?.length > 0 &&
			data?.likObj?.selfCollage?.includes(data._id)) {
			return true
		}
	}
	const dealClickHeart = async (type, cloaageId) => {
		await userObj.getLikeCollage(type, cloaageId, uniCloud.getCurrentUserInfo().uid)
	}
	const handClickUser = (data) => {
		userStore.updateCurrentUserInfo(data)
		uni.navigateTo({
			"url": '/pages/findUser/index'
		})
	}
	const loadMore = () => {
		// 触发加载更多
		console.log("加载更多");
	};

	const change = (e : any) => {
		currnetData.value = e.detail
		console.log("🚀 ~ file: index.vue:53 ~ change ~ data:", e);
	};

	// 播放第几个
	const playIndex = (index : number) => {
		mTikTokRef.value?.initSwiperData(index);
	};
	const getInfo = async () => {
		let res = await userObj.getSurf(page.value)
		swiperList.value = [
			...swiperList.value,
			...res.data
		]
	}
	onMounted(() => {
		// 直接播放第3个
		// playIndex(3);
		getInfo()
	});
</script>
<style lang="scss">
	$zIndex: 99;

	.woshou {
		font-size: 36px;
	}

	.video-layer {
		position: absolute;
		right: 12px;
		bottom: 120px;
		color: #fff;
	}

	.video-bottom-area {
		position: absolute;
		left: 20px;
		bottom: 40px;
		opacity: 0;
		transition: all 250ms;
		z-index: 0;
		max-width: 280px;

		&.active {
			opacity: 1;
			z-index: $zIndex;
			transition-delay: 200ms;
		}

		.shop-name {
			color: #fff;
			margin-bottom: 6px;
		}

		.shop-card {
			min-width: 500rpx;
			height: 120rpx;
			background-color: rgba(255, 255, 255, 0.75);
			border-radius: 4px;
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.shop-card-item {
				margin: 0 10px;
				position: relative;
				color: #333;

				&::after {
					border-left: 1px solid #eee;
					height: 13px;
					content: " ";
					margin-left: 8px;
					position: absolute;
					top: 15%;



				}

			}

			.shop-card-itemlast {
				&::after {
					border: 0px;




				}
			}

			.age {
				color: red;
			}
		}
	}

	.video-side-right {
		position: absolute;
		right: 12px;
		bottom: 120px;
		color: #fff;
		opacity: 0;
		transition: all 250ms;
		z-index: 0;

		&.active {
			opacity: 1;
			z-index: $zIndex;
			transition-delay: 200ms;
		}

		.action-item {
			position: relative;
			margin-bottom: 20px;
			text-align: center;

			.shop-logo {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
			}

			.iconfont {
				display: block;
				font-size: 28px;
			}

			.action-item-text {
				display: block;
				font-size: 12px;
			}

			.action-btn {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -8px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f60;

				.iconfont {
					font-size: 16px;
				}
			}
		}

		.action-item-user {
			margin-bottom: 40px;
		}
	}
</style>